---
title: Timeline
description: Used to display a list of events in chronological order
links:
  source: components/timeline
  storybook: components-timeline--basic
  recipe: timeline
---

<ExampleTabs name="timeline-basic" />

## Usage

```tsx
import { Timeline } from "@chakra-ui/react"
```

```tsx
<Timeline.Root>
  <Timeline.Item>
    <Timeline.Connector>
      <Timeline.Separator />
      <Timeline.Indicator />
    </Timeline.Connector>
    <Timeline.Content>
      <Timeline.Title />
      <Timeline.Description />
    </Timeline.Content>
  </Timeline.Item>
</Timeline.Root>
```

## Examples

### Sizes

Use the `size` prop to change the size of the timeline.

<ExampleTabs name="timeline-with-sizes" />

### Variants

Use the `variant` prop to change the variant of the timeline.

<ExampleTabs name="timeline-with-variants" />

### Content Before

Here's an example of a timeline with content before the timeline indicator.

<ExampleTabs name="timeline-with-content-before" />

### Alternating Content

Here's an example of a timeline with alternating content.

<ExampleTabs name="timeline-alternating" />

### Composition

Here's an example of how to compose the timeline with other components to create
a consistent-looking timeline.

<ExampleTabs name="timeline-composition" />

## Props

### Root

<PropTable component="Timeline" part="Root" />
